<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>消息管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/message.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/copywechat.css"/>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR" style="width:20%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">已发布</span></a>
                </div>
            </div>
            <div class="from-body withheader contentbox " style=" overflow: auto;">
                <div class="box" ms-repeat="tableData">
                    <div class="box-tit" ms-attr-title="el.receiverName">
                        <span style="color: #00a0e9">{{el.receiverName|truncate(20)}}</span>
                    </div>
                    <div class="box-con">
                        <p>
                            最新通知：<span style="color: red">{{el.createTime}}</span>
                        </p>
                        <p style="font-size: 12px">
                            {{el.content}}
                        </p>
                        <div class="mask" ms-on-click="showMsg(el)"><span>点击查看</span></div>
                    </div>
                    <div class="box-fj">
                    </div>
                </div>
            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:20%">

            <div class="from-header borderB">
                <span class="font14">编辑</span>
                <button class="layui-btn layui-btn-small layui-btn-danger" style="float: right;margin-left: 10px"
                        onclick="addDep()">选择部门
                </button>
                <button class="layui-btn layui-btn-small" style="float: right" onclick="addUser()">选择人员</button>
            </div>
            <div class="from-body withheader contentbox8 layui-form layui-form-pane" style=" overflow: auto;">
                <div style="width: 100%;;float: left">
                    <div class="container">
                        <div class="right">
                            <div class="con-top">
                                <div class="head-icon">
                                    <img class="img" src="${ctx}/static/images/pic.jpg">
                                    <button class="layui-btn layui-btn-mini layui-btn-radius layui-btn-warm"
                                            style="margin-top: 5px"
                                            ms-if="users.size()==0&&deps.size()==0">
                                        全体成员
                                    </button>
                                    <button class="layui-btn layui-btn-mini" style="margin-top: 5px"
                                            ms-repeat="users"
                                            ms-on-click="$remove">
                                        {{el.username}}
                                    </button>
                                    <button class="layui-btn layui-btn-danger layui-btn-mini" style="margin-top: 5px"
                                            ms-repeat="deps"
                                            ms-on-click="$remove">{{el.itemText}}
                                    </button>
                                </div>
                            </div>
                            <div class="con-content">
                                <ul id="con_list">
                                    <li ms-repeat="msgs">
                                        <img class="img" src="${ctx}/static/images/pic.jpg" alt="">
                                        <div class="con-bot">
                                            <span>{{el.sendTime}}</span>
                                            <span>{{el.sendUser}}</span>
                                            <div class="message">
                                                {{el.content|img|html}}
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="con-send">
                                <div class="text-box">
                                    <textarea placeholder="请输入通知内容" ms-duplex="sendContent"></textarea>
                                </div>
                                <div class="btn-box clearfix">
                                    <div class="btn-con">
                                        <button class="layui-btn" onclick="sendMsg()">发送</button>
                                        <span>按ctrl+Enter键发送</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableData: [],
            users: [],//发送人员
            deps: [],//发送的部门
            msgs: [],
            sendContent: ''
        });
        avalon.scan();
        loadTableData();
    });
    $(function () {
        document.onkeydown = function (e) {
            var ev = document.all ? window.event : e;
            if (ev.ctrlKey && ev.keyCode == 13) {
                sendMsg();
            }
        }
    });
    //查询某一系列纪录
    function showMsg(el) {
        var dataStr = {
            receiverName: el.$model.receiverName
        }
        $.ajax({
            type: 'post',
            url: '${ctx}/comMsgController/showMsg.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    vm.msgs = data.msgs;
                    vm.users = data.users;
                    vm.deps = data.deps;
                }
            }
        });
    }
    //加载表格数据
    function loadTableData() {
        $.ajax({
            type: 'post',
            url: '${ctx}/comMsgController/selectAllMsg.action',
            data: "",
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    vm.tableData = data.tableData;
                }
            }
        });
    }
    //添加部门
    function addDep() {
        layer.open({
            type: 2,
            title: "新增部门",
            area: ['800px', '600px'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/messageController/toDepList.action"
        });
    }
    function addUser() {
        layer.open({
            type: 2,
            title: "新增人员",
            area: ['800px', '600px'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/messageController/toUserList.action"
        });
    }
    //发送消息
    function sendMsg() {
        var content = vm.$model.sendContent.replace(/\n/g, "");
        var content1 = content.replace(/ /g, "");
        if (content1 == "") {
            layui.layer.msg('输入内容不能为空。', {icon: 2, anim: 6});
            return;
        }
        var msg = {
            sendTime: getNowFormatDate(),
            sendUser: '${user.username}',
            content: vm.$model.sendContent,
            users: vm.$model.users,
            deps: vm.$model.deps
        }
        var dataStr = {msg: JSON.stringify(msg)}
        vm.msgs.push(msg);
        vm.sendContent = "";
        //后台保存至数据库
        $.ajax({
            type: 'post',
            url: '${ctx}/comMsgController/sendMsg.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    loadTableData();
                }
            }
        });
    }
</script>
</body>

</html>